<template>
  <div class="MapLocation" >
    <div class="map" ref="mapContainer"></div>
    <el-input v-if="isShouldMarker" class="searchText" v-model="searchText" placeholder="请输入地址"></el-input>
    <el-button v-if="isShouldMarker" class="onSearch" type="primary" @click="onSearch">搜 索</el-button>
    <el-button v-if="isShouldMarker" class="punctuation" @click="punctuation">标点</el-button>
  </div>
</template>

<script>
import { MapContainer } from '../../common/js/amap'
import AMap from 'AMap'

export default {
  name: 'MapLocation',
  props: {
    marker: {
      type: Object,
      default: () => {
        return { lon: 0, lat: 0 }
      }
    },
    isShouldMarker: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      map: null,
      islocation: false,
      geocoder: null,
      searchText: ''
    }
  },
  methods: {
    initMap() {
      this.map = new MapContainer({
        TLayer: true,
        target: this.$refs.mapContainer,
        zoom: 12,
        center: [120.196303, 30.205215]
      })
      this.map && this.map.map && this.map.map.setDefaultCursor('pointer')
      this.isShouldMarker && this.map && this.map.map && this.map.map.on('click', this.addLocation)
    },
    addMarker(lon, lat) {
      this.map.map.setCenter([lon, lat])
      this.map.addPoints('marker', [{ lon, lat }])
    },
    punctuation() {
      this.islocation = !this.islocation
      this.map.map.setDefaultCursor(this.islocation ? 'crosshair' : 'pointer')
    },
    addLocation(e) {
      if (this.islocation) {
        this.addMarker(e.lnglat.getLng(), e.lnglat.getLat())
        this.getAddress([e.lnglat.getLng(), e.lnglat.getLat()])
        this.$emit('showLocation', { lon: e.lnglat.getLng(), lat: e.lnglat.getLat() })
      }
    },
    getAddress([lon, lat]) {
      this.geocoder.getAddress([lon, lat], (status, result) => {
        console.info(status, result)
        if (status === 'complete' && result.regeocode) {
          const address = result.regeocode.formattedAddress
          this.$emit('showAddress', address)
        }
      })
    },
    onSearch() {
      if (!this.searchText) {
        return false
      }
      const autocomplete = new AMap.PlaceSearch({ city: "杭州" })
      autocomplete.search(this.searchText, (status, { poiList = { pois: [] }}) => {
        if (status === "complete" && poiList.pois.length) {
          const posi = [
            poiList.pois[0].location.lng,
            poiList.pois[0].location.lat
          ]
          this.map && this.map.setCenterPosition(posi, 15)
        }
      })
    }
  },
  mounted() {
    this.geocoder = new AMap.Geocoder()
    this.initMap()
  },
  watch: {
    marker: {
      handler(val, oldVal) {
        this.searchText = ''
        if (!val || !oldVal || !val.lon || !val.lat) {
          return
        }
        if (val.lon === oldVal.lon && val.lat === oldVal.lat) {
          return
        }
        if (this.map && this.map.map && this.marker.lat && this.marker.lon) {
          this.addMarker(this.marker.lon, this.marker.lat)
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .MapLocation {
    width: 100%;
    height: 530px;
    position: relative;
    .map {
      height: 100%;
      width: 100%;
      z-index: 5;
    }
    .searchText {
      position: absolute;
      top: 52px;
      left: 20px;
      z-index: 6;
      width: 630px;
    }
    .onSearch {
      position: absolute;
      top: 52px;
      right: 80px;
      z-index: 6;
    }
    .punctuation {
      position: absolute;
      top: 52px;
      right: 12px;
      z-index: 6;
    }
  }
</style>
